<template>
	<div class="container login">
		<van-nav-bar title="登录" right-text="注册" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
		<div class="logoimg"></div>
		<div class="loginmain">
			<van-cell-group>
				<van-field placeholder="请输入手机号" left-icon="contact" v-model="phone" />
				<van-field placeholder="密码" left-icon="password-not-view" type="password" v-model="pwd" />
			</van-cell-group>
		</div>
		<router-link to="/forget">
			<div class="forgetbut">忘记密码</div>
		</router-link>
		<div class="butcon">
			<van-button tag="a" size="large" type="primary" @click="loginbut">登录</van-button>
		</div>
	</div>
</template>

<script>
	import { login } from '@/api/getData'
	export default {
		name: 'login',
		data() {
			return {
				phone: '',
				pwd: ''

			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1);
			},
			onClickRight() {
				this.$router.push('/register')
			},
			loginbut() {
				login({'phone': this.phone,'pwd': this.pwd,'device': 'gzh'}).then(res => {
					this.$toast('登陆成功');
                    localStorage.setItem("token",res.data.token);
                    this.$store.state.goods.useInfo.token = res.data.token;
					this.$router.push('/my');					
				}).catch(err => {
					this.$toast(err.msg);
				})
			}

		}
	}
</script>

<style>

</style>
<style lang="scss">
	.logoimg {
		width: 2.01rem;
		height: 2.01rem;
		background-color: #02891E;
		margin: 0 auto;
		margin-top: 0.9rem;
		border-radius: 50%;
	}
	
	.loginmain {
		padding: 0.74rem;
	}
	
	.loginmain .van-field__control {
		line-height: 27px;
		padding-left: 0.4rem;
		color: #757575;
	}
	
	.forgetbut {
		padding: 0.7rem;
		text-align: right;
		padding-top: 0;
		color: #43bb25;
	}
	
	.butcon {
		margin: auto 0.8rem;
		margin-top: 0.3rem;
	}
	
	.butcon .van-button--large {
		width: 100%;
		height: 42px;
		line-height: 42px;
		border-radius: 22px;
	}
</style>